
// 接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
// 接口请求方式：get
// 接口参数：
//     id  用户id

// 使用方式
// 获取id为1的用户的购物车
// http://jx.xuzhixiang.top/ap/api/cart-list.php?id=1

// 获取本地用户 id
var uid = localStorage.getItem("uid");
console.log(uid);
var carnull = document.querySelector(".carnull");
var carlist = document.querySelector(".carlist");
if (uid === null) {

    carnull.style.display = "block";
    carlist.style.display = "none";
    alert("请先登录");
} else {
    carnull.style.display = "none";
    carlist.style.display = "block";
}

// 没有登录显示页面空


// 显示购物车商品
loadProductList();

// 显示购物车商品
function loadProductList() {
    let carListAPI = 'http://jx.xuzhixiang.top/ap/api/cart-list.php';
    axios.get(carListAPI, { params: { id: uid } }).then(r => {
        // console.log(r);
        var carArr = r.data.data;
        // console.log(carArr);
        // console.log(!carArr);
        // 没有添加购物车
        if (carArr.length == 0) {
            console.log("空");
            carnull.style.display = "block";
            carlist.style.display = "none";
        }
        let str = '';
        carArr.forEach(item => {
            str += `
                <div class="caritem">
                    <div class="check">
                        <input type="checkbox" name="" id="" onclick="checkItem(this)">
                    </div>
                    <div class="itemimg">
                        <img src="${item.pimg}" alt="">
                    </div>
                    <div class="pmessage">
                        <div class="pname">
                            <h5>女装廓形西装外套</h5>
                            <p>商品编号：WVE2S1CE2000</p>
                        </div>
                        <div class="psize">
                            <p>颜色: 正黑</p>
                            <p>尺码: S(165/84A)</p>
                        </div>
                    </div>
                    <div class="pprice">￥ <span> ${item.pprice}</span></div>
                    <div class="pnumchange">
                        <div class="sub" onclick="subNum(${item.uid},${item.pid},${item.pprice},this)">-</div>
                        <div class="pnum">${item.pnum}</div>
                        <div class="add" onclick="addNum(${item.uid},${item.pid},${item.pprice},this)">+</div>
                    </div>
                    <div class="delbtn">
                        <button onclick="delCar(${item.uid},${item.pid},this)">x</button>
                    </div>
                </div>
            `;
        });
        var caritemwrap = document.querySelector(".caritemwrap");
        caritemwrap.innerHTML = str;
    });
}

// 修改商品数量
//更新购物车商品数量
/*
接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
接口请求方式：get
接口参数：
 uid  用户id
 pid  商品id
 pnum  要添加的商品数量
*/
function depaRequest(uid, pid, pnum) {
    //    console.log(pnum);
    let updaAPI = 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php';
    axios.get(updaAPI, { params: { uid, pid, pnum } }).then(r => {
        //    console.log(r.data);
    })
}


// 点击减号
function subNum(uid, pid, pprice, that) {

    // 获取当前商品数量
    let pnum = $(that).siblings(".pnum").text();
    // console.log(pnum);
    pnum--;
    if (pnum >= 1) {
        $(that).siblings(".pnum").text(pnum);
    } else {
        alert("最少选购一件");
        return;
    }
    // 更新接口商品数量
    depaRequest(uid, pid, pnum);

    // 改变底部数量
    let checkitems = $(".caritemwrap .caritem .check input");
    // console.log(checkitems);
    changeBtom(checkitems);
}

// 点击加号
function addNum(uid, pid, pprice, that) {
    // 获取当前商品数量
    let pnum = $(that).siblings(".pnum").text();
    // console.log(pnum);
    pnum++;
    if (pnum <= 10) {
        $(that).siblings(".pnum").text(pnum);
    } else {
        alert("最多选购十件");
        return;
    }
    // 更新接口商品数量
    depaRequest(uid, pid, pnum);

    // 改变底部数量
    let checkitems = $(".caritemwrap .caritem .check input");
    // console.log(checkitems);
    changeBtom(checkitems);
}

// 点击全选按钮 上面按钮全选
var checkAll = $(".caraccounts .checkall input");
// console.log(checkAll);

// 商品总个数
var totalpor = $(".caraccounts .cassnum span");
// console.log(totalpor);
// 商品总价
var totalmoney = $(".caraccounts .total span");
// console.log(totalmoney);

checkAll.click(function () {
    // 记录全选框状态
    let chflag = $(this).prop("checked");
    // console.log(chflag);
    // 选中上面全选框
    let checkitems = $(".caritemwrap .caritem .check input");
    // console.log(checkitems);
    checkitems.prop("checked", chflag);

    // 改变底部数量价格
    changeBtom(checkitems);

})


// 点击商品每个复选框
function checkItem(that) {
    // console.log(that);
    let chflag = $(that).prop("checked");
    // console.log(chflag);

    // 遍历当前勾选列表数组
    let checkitems = $(".caritemwrap .caritem .check input");
    // console.log(checkitems);
    var checkitemArr = [];
    checkitems.each(function (i, item) {
        if ($(item).prop("checked") == true) {
            // console.log(item);
            checkitemArr.push(item);
            // console.log(checkitemArr);
        }
    })
    // console.log(checkitemArr);
    // 当选框全选将全选选中
    if (checkitemArr.length == checkitems.length) {
        checkAll.prop("checked", true);
    } else {
        checkAll.prop("checked", false);
    }

    // 改变底部数量
    changeBtom(checkitems);

}


// 改变底部数量
function changeBtom(checkitemarr) {
    // 改变底部数量价格
    let summoney = 0;
    let sumcass = 0;
    checkitemarr.each(function (i, item) {
        if ($(item).prop("checked")) {
            // console.log(i, item);
            // console.log(item);
            var price = parseFloat($(item).parents(".check").siblings(".pprice").find("span").text());
            // console.log(price);
            var num = parseInt($(item).parents(".check").siblings(".pnumchange").find(".pnum").text());
            // console.log(num);
            sumcass += num;
            summoney += price * num;
        }

    })
    // console.log(sumcass);
    // console.log(summoney);
    totalpor.text(sumcass);
    totalmoney.text(summoney.toFixed(2));

}

//删除购物车商品
/*
接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
接口请求方式：get
接口参数：
 uid  用户id
 pid  商品id

*/

function delCar(uid, pid, that) {
    alert("确认删除");
    let delAPI = 'http://jx.xuzhixiang.top/ap/api/cart-delete.php';
    $.get(delAPI, { uid, pid }, function (e) {
        console.log(e);
        //删除父元素
        $(that).parents(".caritem").remove();
        loadProductList();
        // let checkitems = $(".caritemwrap .caritem");
        // console.log(checkitems);
        // // 商品全部删除
        // if (checkitems.length == 0) {
        //     carnull.style.display = "block";
        //     carlist.style.display = "none";
        // }
       
        // 改变底部数量
        let checkitems = $(".caritemwrap .caritem .check input");
        changeBtom(checkitems);

    });

}

// console.log($(".caritemwrap .caritem"));
